<template xmlns="http://www.w3.org/1999/html">

  <div class="submit">
    <div class="submitPart" v-show="status_one">
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p>
          <span>2</span>截取任务图片并上传
        </p>
        <div class="flex">
          <div class="uploader" >
            <van-uploader :after-read="onRead">
              <img
                src="../../assets/images/photo.png"
                alt=""
              >
              <span>添加图片</span>
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="imgbox"></div>

      <div class="text" style="margin-top: 5px">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button @click="submit">提交</button>
      </div>
    </div><!--等待上传凭证-->

    <div class="submitPart" v-show="status_two">
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p><span>2</span>图片已上传，请等待审核结果</p>
        <div class="flex">
          <div class="">
            <img
              :src="item"
              alt=""
              with="180px"
              height="180px"
              v-for="(item,index) in qeueInfo.voucher"
              :key="index"
              @click="voucher_one(qeueInfo.voucher)"
            >
          </div>
        </div>

      </div>
      <div class="text">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button>审核中</button>
      </div>
    </div> <!--图片已上传，请等待审核结果-->

    <div class="submitPart" v-show="status_three">
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p><span>2</span>图片已上传，审核通过</p>
        <p><span>3</span>上传时间{{info.voucher_at}}  通过时间{{info.review_at}}</p>

        <div class="flex">
          <div class="">
            <!--<img-->
              <!--:src="qeueInfo.voucher"-->
              <!--@click="voucher_one(qeueInfo.voucher)"-->
              <!--alt=""-->
            <!--&gt;-->
            <img
              :src="item"
              alt=""
              with="180px"
              height="180px"
              v-for="(item,index) in qeueInfo.voucher"
              :key="index"
              @click="voucher_one(qeueInfo.voucher)"
            >
          </div>
        </div>

      </div>
      <div class="text">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button>已通过</button>
      </div>
    </div> <!--图片已上传，审核通过-->

    <div class="submitPart" v-show="status_four">
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p><span>2</span>初次审核失败原因：{{qeueInfo.review_reason}},请重新提交上传</p>
        <div class="flex">
          <div class="uploader" >
            <van-uploader :after-read="onRead2">
              <img
                src="../../assets/images/photo.png"
                alt=""
              >
              <span>添加图片</span>
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="imgbox2"></div>
      <div class="text" style="margin-top: 5px">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button @click="submitSecond">审核失败，请重新提交</button>
      </div>
    </div> <!--初次审核失败原因-->

    <div class="submitPart" v-show="status_five">
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p><span>2</span>图片已重新上传，请等待二次审核结果。若审核失败，联系客服处理</p>

        <div class="flex">
          <div class="">
            <img
              :src="item"
              alt=""
              width="280px"
              height="280px"
              v-for="(item,index) in qeueInfo.voucher2"
              :key="index"
              @click="voucher_one(qeueInfo.voucher)"
            >

          </div>
        </div>

      </div>
      <div class="text">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button>重新审核中</button>
      </div>
    </div> <!--重新审核中-->

    <div class="submitPart" v-show="status_six"> <!--status_two-->
      <div class="upload" >
        <p @click="changeInfo" style="color: red"><span>1</span>{{info.task_title}}(*查看任务详情)</p>
        <p><span>2</span>初次审核失败原因：{{qeueInfo.review_reason}}，二次审核失败原因：{{qeueInfo.review_reason2}}。请联系客服线下处理</p>

        <div class="flex">
          <div class="">
            <img
              :src="item"
              alt=""
              v-for="(item,index) in qeueInfo.voucher2"
              :key="index"
              @click="voucher_one(qeueInfo.voucher)"
            >
          </div>
        </div>

      </div>
      <div class="text">
        <h3>任务领取规则：</h3>
        <P>1、上传图片必须清晰明了，以免审核不通过</P>
      </div>
      <div class="submit">
        <button>二次审核失败</button>
      </div>
    </div><!--二次审核失败-->

    <!--task_queue_status-->
    <div class="InfoPart" v-show="showmore">
      <div class="taskinfo">
        <div class="info">
          <p>标题：{{info.task_title}}</p>
          <p>剩余：{{info.task_wait}}份</p>
          <p>佣金：{{info.agentprice}}</p>
          <p>开启时间：{{info.start_time}}</p>
          <p>结束时间：{{info.end_time}}</p>
          <p>注意事项：<span style="color: red">{{info.task_notice}}</span></p>
          <p>操作流程：{{info.task_content}}</p>
        </div>

        <div class="content">
          <h3>图文信息</h3>
          <div>
            <img
              :src="item"
              alt=""
              v-for="(item,index) in info.task_img"
              :key="index"
            >
          </div>
        </div>
      </div>
    </div>

  </div>

</template>
<script>
import { tasklist, fileUploadOne, taskUpload,taskInfo,uploadOss,uploadTaskQueueVoucher,getMyReceiveTaskQueueInfo } from "../../api/user";
import { Toast,ImagePreview } from "vant";
export default {
  data() {
    return {
      info: {},
      list: [],
      qeueInfo:[],
      imageurl_arr: [],
      voucher:[], //凭证地址
      task_id: '',
      task_queue_id: '',
      status_one:false,
      status_two:false,
      status_three:false,
      status_four:false,
      status_five:false,
      status_six:false,
      showmore:false,

    };
  },
  computed: {
  },
  methods: {
    changeInfo(){
      if(this.showmore==true){
        this.showmore = false;
      }else{
        this.showmore = true;
      }
    },
    voucher_one(url){
      ImagePreview(url);
    },
    onRead(file) {

      if (this.imageurl_arr.length >=3) {
        Toast("最多上传三张");
      } else {
        let fd = new FormData();
        fd.append("file", file.file);

        uploadOss(fd).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.imageurl_arr.push(res.url[0]); //展示的
            this.voucher.push(res.data[0]); //提交的
            console.log(this.imageurl_arr)
            console.log(this.voucher)

            const img = document.createElement("img");
            img.src = res.url[0];
            const imageBox = document.querySelector(".imgbox");
            imageBox.appendChild(img);
          }
        });
      }
    },
    onRead2(file) {
      if (this.imageurl_arr.length >=3) {
        Toast("最多上传三张");
      } else {
        let fd = new FormData();
        fd.append("file", file.file);
        uploadOss(fd).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.imageurl_arr.push(res.url[0]); //展示的
            this.voucher.push(res.data[0]); //提交的
            console.log(this.imageurl_arr)
            console.log(this.voucher)

            const img = document.createElement("img");
            img.src = res.url[0];
            img.width=80
            img.height=80
            const imageBox = document.querySelector(".imgbox2");
            imageBox.appendChild(img);
          }
        });
      }
    },
    submit() {
      if (!this.imageurl_arr.length) {
        Toast("请上传图片");
        return;
      }
      uploadTaskQueueVoucher({
        task_queue_id: this.task_queue_id,
        voucher: this.voucher,
        status:2,  // "status":"2"//in[2,5],第一次上传status=2，第二次上传status5
      }).then(res => {
        Toast(res.message);
        if (res.status == 200) {
          this.getMyQueueInfo()
          this.status_one = false
        }
      });
    },
    submitSecond(){  //二次提交申请
      if (!this.imageurl_arr.length) {
        Toast("请上传图片");
        return;
      }
      uploadTaskQueueVoucher({
        task_queue_id: this.task_queue_id,
        voucher: this.voucher,
        status:5,  // "status":"2"//in[2,5],第一次上传status=2，第二次上传status5
      }).then(res => {
        Toast(res.message);
        if (res.status == 200) {
          this.getData()
          this.status_four = false
          this.getMyQueueInfo()
        }
      });
    },

    getData() {
      taskInfo({ task_id: this.task_id }).then(res => {
        this.info = res.data;
      });
    },

    getMyQueueInfo(){
      getMyReceiveTaskQueueInfo({
        task_queue_id: this.task_queue_id,
      }).then(res => {
        this.qeueInfo = res.data
        console.log(this.qeueInfo.status)
        if(this.qeueInfo.status ==1 ){
          this.status_one = true
        }else if(this.qeueInfo.status ==2){
          this.status_two = true
        }else if(this.qeueInfo.status ==3){
          this.status_three = true
        }else if(this.qeueInfo.status ==4){
          this.status_four = true
        }else if(this.qeueInfo.status ==5){
          this.status_five = true
        }else if(this.qeueInfo.status ==6){
          this.status_six = true
        }
        // "status": 5,// 1=进行中待审核 2=审核中 3=审核通过 4=审核失败重新上传  5=重新审核 6=审核失败关闭
      });
    },

  },
  created() {
    this.task_id = this.$route.query.task_id;
    this.task_queue_id = this.$route.query.task_queue_id;

    this.getData();
    this.getMyQueueInfo();
  }
};
</script>
<style lang="scss">
.submit {
  width: 100%;
  height: 100%;
  background-color: #fff;
  header {
    color: #fff;
  }
  .lizi {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transition: 0.5s all;
    transform: scale(0);
    img {
      width: 100%;
    }
  }
  .flex {
    padding: 15px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
  }
  .upload {
    p {
      padding: 10px 15px;
    }
    p:first-child {
      span {
        margin-right: 5px;
        display: inline-block;
        width: 22px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        background: rgba(255, 126, 51, 1);
        border-radius: 50%;
      }
    }
    p:nth-child(2) {
      span {
        margin-right: 5px;
        display: inline-block;
        width: 22px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        background: rgba(242, 48, 71, 1);
        border-radius: 50%;
      }
    }
    p:nth-child(3) {
      span {
        margin-right: 5px;
        display: inline-block;
        width: 22px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        background: #55a532;
        border-radius: 50%;
      }
    }
  }
  .exp {
    position: relative;
    text-decoration: blue;
    p {
      color: #f11633;
      font-size: 16px;
      text-decoration: underline;
      white-space: nowrap;
      position: absolute;
      left: 2px;
      bottom: 2px;
    }
  }
  .imgbox {
    height: 100px;
    img {
      height: 100px;
      width: 100px;
      margin: 0 2px;
    }
  }
  .uploader {
    background-color: #ddd;
    margin-left: 15px;
    width: 100px;
    height: 100px;
    border: 1px dashed #eee;
    text-align: center;
    border-radius: 5px;
    margin: 0 15px;
    .van-uploader {
      width: 100%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    img {
      width: 25px;
      margin-bottom: 5px;
    }
    span {
      // font-size: 100px;
      // font-weight: 100;
      color: #999;
      display: inline-block;
      height: 20px;
    }
  }

  .text {
    width: 80%;
    margin: 0 auto;
    border: 1px dashed #ccc;
    border-radius: 5px;
    span {
      color: #e71434;
    }
    padding: 15px;
    p {
      padding: 3px;
    }
    h3 {
      font-size: 14px;
      font-weight: 500;
    }
  }
  .submit {
    width: 85%;
    margin: 20px auto;
    button {
      width: 100%;
      height: 35px;
      background: rgba(241, 22, 51, 1);
      border-radius: 4px;
      border: none;
      color: #fff;
      outline: none;
    }
  }
  .taskinfo {
    width: 100%;
    padding-bottom: 48px;
    background-color: #f5f5f5;
    header {
      color: #fff;
    }
    .info {
      margin: 5px;
      width: 96%;
      margin: 0 auto;
      border: 1px solid #ddd;
      background-color: #fff;
      padding: 10px 5px;
      text-align: center;
      p {
        width: 100%;
        padding: 5px;
        text-align: left;
      }
      p:first-child {
        border-bottom: 1px solid #ddd;
      }
      p:nth-child(2) {
        border-bottom: 1px solid #eee;
      }
      button {
        color: #0909ff;
        border: 1px solid #0909ff;
        padding: 3px 15px;
        border-radius: 5px;
      }
    }
    .content {
      margin: 5px;
      width: 96%;
      margin: 0 auto;
      border: 1px solid #ddd;
      background-color: #fff;
      img {
        width: 100%;
      }
      h3 {
        width: 100%;
        padding: 15px;

        border: red;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .submit {
      text-align: center;
      width: 90%;
      margin: 20px auto;
      button {
        width: 100%;
        height: 40px;
        background-color: #f71434;
        outline: none;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>

